<template>
  <div style="">
    <div class="top">
      <Row
        type="flex"
        justify="space-between"
        class="code-row-bg"
        style="padding: 20px; height: 100%"
        :gutter="50"
      >
        <Col span="12">
          <chart-bar-axis
            :value="bloc.num"
            style="height: 100%; margin: 0px; width: 100%; border: none"
          />
        </Col>
        <Col span="12">
          <chart-bar-axis
            :value="bloc.statusNum"
            style="height: 100%; margin: 0px; width: 100%; border: none"
          />
        </Col>
      </Row>
    </div>
    <div class="bottom">
      <Row
        type="flex"
        justify="space-between"
        class="code-row-bg"
        style="padding: 20px; height: 100%"
        :gutter="50"
      >
        <Col span="12">
          <ChartBarAxis
            :value="bloc.modelNum"
            style="height: 500px; margin: 0px; width: 100%; border: none"
          />
        </Col>
        <Col span="12">
          <ChartBarAxis
            :value="bloc.modelTime"
            style="height: 500px; margin: 0px; width: 100%; border: none"
          />
        </Col>
      </Row>
      <row>
        <h3>设备地区分布:</h3>
      </row>

      <row style="margin-top: 30px">
        <Select
          v-model="type"
          style="width: 200px; margin-right: 5px"
          placeholder="按月统计"
          @on-change="handleChange"
        >
          <Option
            v-for="(item, index) in typeList"
            :value="index"
            :key="index"
            >{{ item }}</Option
          >
        </Select>
        <DatePicker
          format="yyyy-MM-dd"
          type="daterange"
          show-week-numbers
          :value="[bloc.model.createBegin, bloc.model.createEnd]"
          @on-change="dateChange"
          split-panels
          :options="options"
          style="width: 200px; margin-right: 5px"
        ></DatePicker>
        <Button
          icon="ios-search"
          type="primary"
          style="margin-right: 5px"
          @click="
            bloc.getDevcieDistribute(
              bloc.DeviceDistribute.pageIndex,
              bloc.DeviceDistribute.pageSize,
              bloc.model
            )
          "
        >
          查询
        </Button>
        <Button icon="ios-refresh" @click="reset">重置</Button>
      </row>
      <div style="margin-top: 30px">
        <Table
          border
          ref="selection"
          :columns="columns4"
          :data="bloc.DeviceDistribute.items"
        >
        </Table>
      </div>
      <div style="margin-top: 20px">
        <div style="float: right">
          <Page
            :page-size="bloc.DeviceDistribute.pageSize"
            :total="bloc.DeviceDistribute.itemCount"
            @on-change="
              (val) =>
                bloc.getDevcieDistribute(
                  val,
                  bloc.DeviceDistribute.pageSize,
                  this.bloc.model
                )
            "
            @on-page-size-change="
              (val) =>
                bloc.getDevcieDistribute(
                  bloc.DeviceDistribute.pageIndex,
                  val,
                  this.bloc.model
                )
            "
            show-sizer
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { ChartBarAxis } from "@/component/charts";
import { DataBloc } from "./DataBloc";
import { Route } from "vue-router";

@Component({
  components: { ChartBarAxis },
})
export default class extends Vue {
  @Prop({ type: Number }) readonly init!: number;
  bloc = new DataBloc();
  resItems: any = [];
  options: any = {};

  typeList: any = {
    1: "按月统计",
    2: "按周统计",
    3: "按日统计",
    4: "按年统计",
  };
  type: number = 1;
  columns4: any = [
    {
      title: "城市",
      key: "city",
    },
    {
      title: "新增设备",
      key: "num",
    },
    // {
    //   title: '新增占比',
    //   key: 'percentAdd'
    // },
    // {
    //   title: '设备总数',
    //   key: 'sum'
    // }
  ];
  data1: any = [
    {
      city: "广州市",
      devAdd: "1000",
      percentAdd: "10%",
      sum: "1000",
    },
    {
      city: "广州市",
      devAdd: "1000",
      percentAdd: "10%",
      sum: "1000",
    },
    {
      city: "广州市",
      devAdd: "1000",
      percentAdd: "10%",
      sum: "1000",
    },
    {
      city: "广州市",
      devAdd: "1000",
      percentAdd: "10%",
      sum: "1000",
    },
  ];

  handleChange(value) {
    let date = new Date();
    let nowTimeStamp = date.getTime();
    this.bloc.model.createEnd = nowTimeStamp;
    if (value === "1") {
      this.bloc.model.createBegin = nowTimeStamp - 30 * 24 * 60 * 60 * 1000;
      let scopeBegin = nowTimeStamp - 12 * 30 * 24 * 60 * 60 * 1000;
      this.options = {
        disabledDate(date1) {
          const disabledDay = date1.getTime();
          return disabledDay > nowTimeStamp || disabledDay < scopeBegin;
        },
      };
    } else if (value === "2") {
      this.bloc.model.createBegin = nowTimeStamp - 7 * 24 * 60 * 60 * 1000;
      let scopeBegin = nowTimeStamp - 15 * 7 * 24 * 60 * 60 * 1000;
      this.options = {
        disabledDate(date1) {
          const disabledDay = date1.getTime();
          return disabledDay > nowTimeStamp || disabledDay < scopeBegin;
        },
      };
    } else if (value === "3") {
      this.bloc.model.createBegin = nowTimeStamp - 24 * 60 * 60 * 1000;
      let scopeBegin = nowTimeStamp - 90 * 24 * 60 * 60 * 1000;
      this.options = {
        disabledDate(date1) {
          const disabledDay = date1.getTime();
          return disabledDay > nowTimeStamp || disabledDay < scopeBegin;
        },
      };
    } else {
      this.bloc.model.createBegin =
        nowTimeStamp - 12 * 30 * 24 * 60 * 60 * 1000;
      let scopeBegin = nowTimeStamp - 3 * 12 * 30 * 24 * 60 * 60 * 1000;
      this.options = {
        disabledDate(date1) {
          const disabledDay = date1.getTime();
          return disabledDay > nowTimeStamp || disabledDay < scopeBegin;
        },
      };
    }
  }

  dateChange(date) {
    if (date[0] === "" || date[1] === "") {
      this.bloc.model.createBegin = undefined;
      this.bloc.model.createEnd = undefined;
      return false;
    }
    let createBegin = new Date(date[0]);
    let createEnd = new Date(date[1]);
    this.bloc.model.createBegin = createBegin.getTime();
    this.bloc.model.createEnd = createEnd.getTime();
  }

  reset() {
    this.bloc.model = {
      companyId: 0 || undefined,
      createBegin: 0 || undefined,
      createEnd: 0 || undefined,
    };
    this.bloc.getDevcieDistribute(1, 10, this.bloc.model);
  }

  created() {
    console.log(this.bloc);
    Promise.race([
      this.bloc.getDevcieDistribute(1, 10, this.bloc.model),
      this.bloc.getDeviceFaultNum(this.$route.params.id),
      this.bloc.getDeviceUseModelLifetime(
        undefined,
        undefined,
        this.$route.params.id
      ),
      this.bloc.getDeviceUseModeUse(
        undefined,
        undefined,
        this.$route.params.id
      ),
      this.bloc.getDeviceStatusNum(this.$route.params.id),
    ]).then((res) => {
      console.log(this.bloc);
    });
  }

  // beforeRouteUpdate(to: Route, from: Route, next: (vm: any) => void) {
  //   next(vm => {
  //     Promise.race([vm.bloc.getDevcieDistribute(1, 10, this.bloc.model), vm.bloc.getDeviceFaultNum(),
  //       vm.bloc.getDeviceUseModelLifetime(), vm.bloc.getDeviceUseModeUse(), vm.bloc.getDeviceStatusNum()])
  //       .then(res => {
  //         console.log(vm.bloc.modelNum)
  //       })
  //   });
  // }
}
</script>
<style lang="less" scoped>
.top {
  width: 100%;
  height: 500px;
  border-bottom: 1px solid #f2f2f2;
  margin-bottom: 20px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(242, 242, 242, 1);
}

.bottom {
  width: 100%;
  min-height: 800px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(242, 242, 242, 1);
  padding: 30px;
}
</style>
